<template>
  <div>
    <el-button
      :plain="circle"
      :type="type"
      size="small"
      icon="el-icon-edit"
      @click="click"
      :circle="circle"
      >{{ msg }}</el-button
    >
    <el-dialog :title="title" :visible.sync="dialogFlag" @close="onClose">
      <el-form
        :rules="rules"
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="权限组名称" prop="pid">
          <el-radio-group v-model="isPointLabel">
            <el-radio :label="'菜单'"></el-radio>
            <el-radio :label="'权限点'"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称" prop="id">
          <selectTree @nodePid="nodePid" :data="simple"></selectTree>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="dialogFlag = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list } from "@/api/base/menus";
import selectTree from "./selectTree.vue";

export default {
  components: { selectTree },
  name: "addFrom",
  props: {
    msg: {
      type: String,
    },
    type: {
      type: String,
      default: "success",
    },
    circle: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    form: {
      type: Object,
    },
    menu: {
      type: String,
      default: "菜单",
    },
  },
  data() {
    return {
      value: "",
      dialogFlag: false,
      rules: {
        code: [{ required: true, message: "代码不能为空" }],
        title: [{ required: true, message: "标题不能为空" }],
      },
      simple: [],
      isPointLabel: this.menu,
    };
  },

  watch: {
    is_point_label: {
      handler(newValue) {
        newValue === "菜单"
          ? this.$emit("is_point_label", false)
          : this.$emit("is_point_label", true);
      },
    },
  },
  methods: {
    nodePid(pid) {
      this.form.pid = pid;
    },
    async submitForm() {
      await this.$refs.form.validate();
      await this.$emit("submitForm", this.form);
      this.dialogFlag = false;
      this.$refs.form.resetFields();
    },
    async click() {
      const { data } = await list();
      // this.simple = JSON.parse(JSON.stringify(data).replace(/childs/g, 'points'))
      this.simple = [
        {
          pid: 0,
          title: "主导航",
          childs: data,
        },
      ];
      this.dialogFlag = true;
      this.$emit("Open");
    },
    onClose() {
      console.log("1");
      this.dialogFlag = false;
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
.select-dropdown {
  height: 215px !important;
  overflow: auto;
}
</style>
